<%--
  Created by IntelliJ IDEA.
  User: 路♥克
  Date: 2017/12/5
  Time: 2:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/web/"/>
    <meta charset="UTF-8">
    <title>Document</title>
    <jsp:include page="elments_views/js.jsp"/>
    <link rel="stylesheet" type="text/css" href="frame/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="frame/bootstrap/css/button.css">
    <!-- 	<link rel="stylesheet" type="text/css" href="frame/bootstrap/css/bootstrap-theme.min.css"> -->
    <link rel="stylesheet" type="text/css" href="frame/css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <%--<script type="text/javascript" src="frame/myfocus/js/myfocus-2.0.1.min.js"></script>--%>
    <style type="text/css">
        .filter{margin: 10px 0;}
        .filter-top-border{border-top:1px solid #ddd;padding-top: 10px;}
        .filter-header{font-size: 20px;border-left: 5px solid #f87b00;padding-left: 10px;}
        .filter-title{font-weight: bold;}
        .filter-label{color: #666}
        .filter-label>a{color: #333;display: inline-block;height: 20px;line-height: 20px;padding: 0 10px;}
        .filter-label>a:hover{color: #fff;background: #f87b00;text-decoration: none;}
        .filter-label>a:active{text-decoration: none;}
        .filter-input{display: inline-block;}
        .filter-input>input{width: 40px;height:20px;display: inline-block;margin: 0 5px;}
        .filter-input>input[type=submit]{border:none;color: #fff;background: #f87b00;line-height: 20px;}
        .more{
            display: none;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body onload="queryGoods(true)">
<jsp:include page="elments_views/header.jsp"/>
<script>
    $(function(){
        $("#yxynav li").removeClass("active");
        $("#yxynav li:nth-child(2)").addClass("active");
    });
</script>
<div class="container" style="margin-top: 120px;background:#fff">
    <div class="row filter">
        <div class="col-md-12">
            <span class="filter-header">按条件选车</span>
        </div>
    </div>
    <div class="row filter">
        <div class="col-md-1">
            <span class="filter-title">价格：</span>
        </div>
        <div class="col-md-11 filter-label price">
            <a href="javascript:queryByPrice();" style="background:#ff8310">不限</a>
            <a href="javascript:queryByPrice(8);">8万以内</a>
            <a href="javascript:queryByPrice(8,12);">8-12万</a>
            <input id="minPrice" style="width: 50px;height: 23px" type="text">万-<input id="maxPrice" style="width: 50px;height: 23px" type="text">万
            <button id="priceBtn" style="background-color: #ff8310;border: none; border-radius: 3px">确定</button>

        </div>
        <script>
            $(function () {
                $(document).on("click",".price a",function () {
                    $(this).parent().children("a").css("background","");
                    $(this).css("background","#ff8310");
                })
            });
        </script>
    </div>
    <div class="row filter">
        <div class="col-md-1">
            <span class="filter-title">品牌：</span>
        </div>
        <div class="col-md-11 filter-label filter-top-border brandPinyin ">
            <a href="javascript:;" style="background:#ff8310">不限</a>
            <a href="javascript:;">A</a>
            <a href="javascript:;">B</a>
            <a href="javascript:;">C</a>
            <a href="javascript:;">D</a>
            <a href="javascript:;">F</a>
            <a href="javascript:;">G</a>
            <a href="javascript:;">H</a>
            <a href="javascript:;">J</a>
            <a href="javascript:;">K</a>
            <a href="javascript:;">L</a>
            <a href="javascript:;">M</a>
            <a href="javascript:;">N</a>
            <a href="javascript:;">O</a>
            <a href="javascript:;">Q</a>
            <a href="javascript:;">R</a>
            <a href="javascript:;">S</a>
            <a href="javascript:;">T</a>
            <a href="javascript:;">W</a>
            <a href="javascript:;">X</a>
            <a href="javascript:;">Y</a>
            <a href="javascript:;">Z</a>
        </div>
        <script>
            $(function () {
                $(document).on("click",".brandPinyin a",function () {
                    $(this).parent().children("a").css("background","");
                    $(this).css("background","#ff8310");
                    var aText = $(this).text();
                    brandPinyin=aText;
                    console.info(aText);
                    $(".brandName a").hide();
                    $(".brandName a").css("background","");
                    $(".brandName a").each(function () {
                        if($(this).attr("brandPinyin")==aText){
                            $(this).show();
                        }
                    });
                    if(aText=="不限"){
                        $(".brandName a").show();
                        brandPinyin=null;
                    }
                    brandName=null;
                    queryGoods();
                });
            });
        </script>
    </div>
    <div class="row filter ">
        <div class="col-md-offset-1 col-md-11 filter-label filter-top-border brandName">
            <%--<a href="javascrip:;" style="background:#ff8310">不限</a>--%>
            <%--<a brandPinyin="A" href="javascript:;">奥迪</a>--%>
            <%--<a href="javascript:;">大众</a>--%>
            <%--<a brandPinyin="A" href="javascript:;">宝马</a>--%>
            <%--<a href="javascript:;">别克</a>--%>
            <%--<a brandPinyin="A" href="javascript:;">奔驰</a>--%>
            <%--<a href="javascript:;">丰田</a>--%>
            <%--<a brandPinyin="B" href="javascript:;">上汽大通</a>--%>
            <%--<a href="javascript:;">现代</a>--%>
            <%--<a brandPinyin="B" href="javascript:;">斯柯达起亚</a>--%>
        </div>
    </div>
    <script>
        $(function () {
            $(document).on("click",".brandName a",function () {
                $(this).parent().children("a").css("background","");
                $(this).css("background","#ff8310");
                brandName=$(this).text();
                queryGoods();
            })
        });
    </script>
    <br>
    <div class="row filter">
        <div class="col-md-1">
            <span class="filter-title">配件：</span>
        </div>
        <div class="col-md-11 filter-label typeName">
            <%--<a href="javascrip:;">轮胎</a>--%>
            <%--<a href="javascrip:;">引擎</a>--%>
            <%--<a href="javascrip:;">发动机</a>--%>
            <%--<a href="javascrip:;">电瓶</a>--%>
            <%--<a href="javascrip:;">减震器</a>--%>
            <%--<a href="javascrip:;">空调</a>--%>
            <%--<a href="javascrip:;">风扇</a>--%>
            <%--<a href="javascrip:;">包括雨刷</a>--%>
            <%--<a href="javascrip:;">车垫</a>--%>
            <%--<a href="javascrip:;">大油封</a>--%>
            <%--<a href="javascrip:;" id="more" style="color: #5bc0de">更多&gt;&gt;</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">包括雨刷</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">车膜</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">车玻璃</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">车灯</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">刹车片</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">包括雨刷</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">离合器片</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">车垫</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">大油封</a>--%>
                <%--<a class="more" style="display: none" href="javascrip:;">前后杠</a>--%>
        </div>
        <script>
            $(function () {
                $(document).on("click",".typeName a",function () {
                    $(this).parent().children("a").css("background","");
                    $(this).css("background","#ff8310");
                    typeName=$(this).text();
                    queryGoods();
                })
            });
        </script>
    </div>
    <div class="container mt-25">
        <div class="row">
            <div class="col-md-9 pd-0">
                <div class="row">
                    <div class="col-md-12">
                        <div style="border-bottom:  2px solid #ff8310;">
                            <h3>商品列表</h3>
                        </div>
                    </div>
                </div>
                <div class="row mt-20 goodsList">

                </div>
                <nav aria-label="Page navigation" style="text-align:center;cursor: pointer">
                    <%--<a href="javascript:loadMore();">加载更多&gt;&gt;</a>--%>
                </nav>
            </div>

            <!-- 右边模块 -->
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-12">
                        <div style="border-bottom:  2px solid #ff8310;">
                            <h3>特卖商品</h3>
                        </div>

                    </div>
                </div>
                <div class="row mt-20">


                    <c:forEach var="g" items="${specialList}">
                        <div class="col-sm-12 col-md-12 goods">
                            <div class="thumbnail"  style="height: 270px">
                                <input type="hidden" value="${g.id}">
                                <img src="${g.previewImgAddress}" alt="...">
                                <div class="caption">
                                    <p class="goods-title">${g.goodsDescribe}</p>
                                    <p ><span style="color: #cfcfcf">市场价:<s>${g.oldPrice}万元</s></span></p>
                                    <p><span>现价<span class="now-price">${g.nowPrice}万元</span></span></p>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="elments_views/footer.jsp"/>
</body>
</html>
<script>
    var minPrice;
    var maxPrice;
    var brandName;
    var brandPinyin;
    var typeName="汽车";
    var fristQuery;
    var querySize;
    var goodsName;
    var more;
    function queryGoods(flag)
    {
        if(flag){
            //异步加载车辆筛选条件
            $.ajax({
                url:"/Web/WebGoodsBrand/findWareGoodsBrand",
                type:"GET",
                dataType:"JSON",
                success:function (json) {
                    $.each(json,function (i,GoodsBrand) {
                        var a="<a brandPinyin='"+GoodsBrand.brandPinyin+"' href='javascript:;'>"+GoodsBrand.brandName+"</a>";
                        $(".brandName").append(a);
                    });
                }
            });
            //异步加载商品类型筛选条件
            $.ajax({
                url:"/Web/WebGoodsType/findAllWebGoodsType",
                type:"GET",
                dataType:"JSON",
                success:function (json) {
                    $.each(json,function (i,GoodsType) {
                        var a;
                        if(GoodsType.typeName=="汽车"){
                            a="<a style='background-color: #ff8310' href='javascript:;'>"+GoodsType.typeName+"</a>";
                        }else{
                            a="<a  href='javascript:;'>"+GoodsType.typeName+"</a>";
                        }
                        $(".typeName").append(a);
                    });
                }
            });
        }
        //异步加载产品
        $(".goodsinfo").remove();
        $.ajax({
            url:"/Web/WebGoodsInfo/findGoodsByKey",
            type:"GET",
            data:{"minPrice":minPrice,
                  "maxPrice":maxPrice,
                  "brandName":brandName,
                  "brandPinyin":brandPinyin,
                  "typeName":typeName,
                  "fristQuery":fristQuery,
                  "querySize":querySize,
                  "goodsName":goodsName,
                  "more":more
                    },
            dataType:"json",
            success:function (json) {
                console.info(json);
                $.each(json,function (i,goodsInfo) {
                    var div="<div class='col-sm-6 col-md-4 goodsinfo goods'>"+
                                "<div class='thumbnail'>"+
                                    "<input type='hidden' value='"+goodsInfo.id+"'>"+
                                    "<img style='overflow: hidden;height: 130px' src='"+goodsInfo.previewImgAddress+"' alt='...'>"+
                                    "<div class='caption'>"+
                                        "<p class='goods-title'>"+goodsInfo.goodsName+"</p>"+
                                        "<p class='news-info textline-2'>"+goodsInfo.goodsDescribe+"</p>"+
                                        "<p><span class='news-info'>市场价:<s>"+goodsInfo.oldPrice+"万元</s></span></p>"+
                                        "<p><span >现价:<span class='now-price'>"+goodsInfo.nowPrice+"万元</span></span></p>"+
                                        "<p class='text-center'><a href='javascript:;' style='width: 100%' class='button  button-highlight button' role='button'>查看详情</a>"+
                                        "</p>"+
                                    "</div>"+
                                "</div>"+
                            "</div>";
                    $(".goodsList").append(div);
                })
            },
            error:function () {
                alert("服务器错误500！");
            }
        });
        more=null;
    }
    function queryByPrice(minPrice1, maxPrice1) {
        minPrice=null;
        maxPrice=null;
        console.info(minPrice1+":"+maxPrice1);
        minPrice = minPrice1;
        maxPrice = maxPrice1;
        queryGoods();
    }
    //手动输入价格筛选
    $("#priceBtn").click(function () {
        $(".price a").css("background","");
        if ($("#minPrice").val()!=null) {
            maxPrice=$("#minPrice").val();
        }
        if ($("#maxPrice").val()!=null) {
            minPrice=$("#maxPrice").val();
        }
        if ($("#maxPrice").val()!=null && $("#minPrice").val()!=null) {
            if($("#maxPrice").val()<$("#minPrice").val()){
                $("#maxPrice").val($("#minPrice").val());
                minPrice=$("#minPrice").val();
                maxPrice=$("#minPrice").val();
            }else{
                minPrice=$("#minPrice").val();
                maxPrice=$("#maxPrice").val();
            }

        }
        queryGoods();
    });
    function loadMore() {
        more="more";
        queryGoods();
    }
    $(function () {
        if(haveParam(decodeURI(location.href))){
            typeName=null;
            $("#key").val(getCaption(decodeURI(location.href)));
            goodsName = getCaption(decodeURI(location.href));
        }
        $("#more").click(function () {
            alert();
            $(this).hide();
            $(".more").show();
        });

    });
    function getCaption(obj){
        var index=obj.lastIndexOf("=");
        obj=obj.substring(index+1,obj.length);
        return obj;
    }
    function haveParam(obj) {
        return obj.indexOf("key") >= 0;
    }
</script>
